<template>
  <view class="content flexc">
    <view class="card flexc align-center">
      <!-- <image class="user" src="@/static/applogo.png"></image>
			<text class="name text-color1">只记今朝笑</text> -->
      <text class="money">¥ {{ couponDetail.discountedPrice }}</text>
      <w-barcode
        class="barcode"
        :options="baroptions"
        @generate="generateBarCode"
      ></w-barcode>
      <image class="barcode-img" :src="barCodeImg"></image>
      <view class="barcode-text text-color5" @click="hideCouponCode = false">
        {{ formatCouponCode }} 查看数字
      </view>
      <w-qrcode
        class="qrcode"
        :options="qroptions"
        @generate="generateQrCode"
      ></w-qrcode>
      <image class="qrcode-img" :src="qrCodeImg"></image>
      <view class="qrcode-desc text-color5 flexr align-center">
        <image class="refresh" src="@/static/refresh.png"></image>
        会员码每30秒自动更新，请在店内消费时使用
      </view>
      <view class="divider"></view>
      <view class="infos flexc">
        <view class="invites">
          <view
            class="invites-friend flexr justify-spacebwt"
            v-for="(item, index) in couponDetail.couponAssistanceList"
            :key="index"
          >
            <text class="text-color1">
              好友<text class="text-color-primary">@{{ item.nickName }}</text
              >助力{{ item.assistanceAmount }}元
            </text>
            <text class="text-color1"> {{ item.assistanceDate }} </text>
          </view>
          <view class="invites-hint"> 快点击下方按钮邀请朋友来助力吧 </view>
        </view>
        <view class="infos-item">
          基础优惠: ¥{{ couponDetail.discountedPrice }}
        </view>
        <view class="infos-item">
          最高优惠: ¥{{ couponDetail.maxDiscountedPrice }}
        </view>
        <view class="infos-item">
          最低助力人数: {{ couponDetail.minAssistance }}
        </view>
        <view class="infos-item">
          可使用门店: {{ couponDetail.headofficeName }}
        </view>
        <view class="infos-item">
          有效期至: {{ couponDetail.expiryTime }}
        </view>
        <view class="infos-item"> 使用规则: </view>
        <view class="rule-item">
          1.流程：顾客菜单→优惠券→优惠券详情→出示优惠券码→店员扫码，支付成功，自动减去优惠
        </view>
        <view class="rule-item">
          2.限制:每次支付仅限使用1张优惠券，领券之后直接线上/线下购买商品时选择付款即可
        </view>
        <view class="rule-item">
          3.其他:本券只限购买对应商品时作抵扣金额用，不设找零或兑换现金
        </view>
        <view class="rule-item"> 4.优惠券仅限在会员注册平台核销 </view>
        <view class="rule-item">
          5.优惠券一经使用，无论是否发生退换货，原则上均不予以退还。
        </view>
        <view class="rule-item"> 6.优惠券最终解释权归商家所有 </view>
      </view>
      <!-- <view class="flex-1"></view>
			<view class="datas flex-1 flexr align-center justify-spacebwt">
				<view class="flexc align-center flex-1">
					<view class="number">260</view>
					<view class="label">余额</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">386</view>
					<view class="label">积分</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">5</view>
					<view class="label">优惠券</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">3</view>
					<view class="label">消费次卡</view>
				</view>
			</view> -->
    </view>
    <button
      class="flexr align-center justify-center invite-button"
      style="margin-bottom: 20rpx; flex-shrink: 0"
      open-type="share"
    >
      <image class="invite-icon" src="@/static/invite.png"></image>
      <text class="invite-text"> 邀请好友助力放大优惠券 </text>
    </button>

    <uni-popup
      ref="getCouponDialogRef"
      type="center"
      background-color="#00000000"
      border-radius="35rpx"
      :mask-click="false"
    >
      <getCouponDialog
        @cancel="onCancelGetCouponDialog"
        @confirm="onConfirmGetCouponDialog"
      ></getCouponDialog>
    </uni-popup>
    <uni-popup
      ref="assistCouponDialogRef"
      type="center"
      background-color="#00000000"
      border-radius="35rpx"
      :mask-click="false"
    >
      <assistCouponDialog
        @cancel="onCancelAssistCouponDialog"
        @confirm="onConfirmAssistCouponDialog"
      ></assistCouponDialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, nextTick } from "vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import { GetCouponDetail, AssistCoupon } from "@/api/api";
import getCouponDialog from "@/subpages/widgets/getCouponDialog.vue";
import assistCouponDialog from "@/subpages/widgets/assistCouponDialog.vue";
import { useUserStore } from "@/store/user";
import {
  SHARE_ACTION_GIVE_COUPON,
  SHARE_ACTION_ASSIST_COUPON,
  buildShareQueryParams,
} from "@/tools/share";
const userStore = useUserStore();
const getCouponDialogRef = ref(null);
const assistCouponDialogRef = ref(null);
const couponDetail = ref({});
const qrCodeImg = ref();
const barCodeImg = ref();
const baroptions = ref({
  width: 650,
  height: 112,
  code: "",
});
const qroptions = ref({
  code: "", // 生成二维码的值
  size: 390,
});
onLoad(({ action, payload, couponNumber }) => {
  console.log("couponDetail onLoad", action, couponNumber, payload);
  if (payload) {
    const data = JSON.parse(payload);
    couponDetail.value = data;
    uni.setNavigationBarTitle({
      title: data.couponTitle,
    });
    baroptions.value.code = data.couponCode;
    qroptions.value.code = data.couponCode;
  } else if (couponNumber) {
    GetCouponDetail(couponNumber).then((data) => {
      couponDetail.value = data;
      uni.setNavigationBarTitle({
        title: data.couponTitle,
      });
      baroptions.value.code = data.couponCode;
      qroptions.value.code = data.couponCode;
    });
  }

  nextTick(() => {
    if (action === SHARE_ACTION_GIVE_COUPON) {
      showGiveCouponDialog();
    } else if (action === SHARE_ACTION_ASSIST_COUPON) {
      showAssistCouponDialog();
    }
  });
});
const hideCouponCode = ref(true);
const formatCouponCode = computed(() => {
  if (hideCouponCode.value) {
    if (
      couponDetail.value.couponCode &&
      couponDetail.value.couponCode.length > 5
    ) {
      return couponDetail.value.couponCode.substr(0, 5) + " **** **** ****";
    } else {
      return "**** **** ****";
    }
  }
  return couponDetail.value.couponCode;
});
function generateQrCode(e) {
  console.log("generateQrCode", e);
  qrCodeImg.value = e.img.tempFilePath;
}
function generateBarCode(e) {
  barCodeImg.value = e.img.tempFilePath;
}
function showGiveCouponDialog() {
  getCouponDialogRef.value?.open();
}
function onCancelGetCouponDialog() {
  getCouponDialogRef.value?.close();
}
async function onConfirmGetCouponDialog() {
  if (!userStore.isLogin) {
    uni.navigateTo({
      url: "/subpages/account/login",
    });
    return;
  }
  // getCouponDialogRef.value?.close();
  uni.showLoading({
    title: "领取中",
  });
  try {
    await userStore.giveCoupon(couponDetail.value.couponNumber);
    uni.showToast({
      title: "领取成功",
      icon: "success",
    });
    getCouponDialogRef.value?.close();
  } catch (error) {
    console.error("onConfirmGetCouponDialog", error);
    uni.showToast({
      title: "领取失败",
      icon: "error",
    });
  }
}
function showAssistCouponDialog() {
  assistCouponDialogRef.value?.open();
}
function onCancelAssistCouponDialog() {
  assistCouponDialogRef.value?.close();
}
async function onConfirmAssistCouponDialog(nickname) {
  // assistCouponDialogRef.value?.close();
  uni.showLoading({
    title: "助力中",
  });
  try {
    await AssistCoupon(
      couponDetail.value.couponNumber,
      userStore.openId,
      nickname
    );
    // uni.hideLoading();
    uni.showToast({
      title: "助力成功",
      icon: "success",
    });
    assistCouponDialogRef.value?.close();
  } catch (error) {
    console.error("onConfirmAssistCouponDialog", error);
    uni.showToast({
      title: "助力失败",
      icon: "error",
    });
  }
}

onShareAppMessage(() => {
  const title = `我正在[${couponDetail.value.storesName}]购买[${couponDetail.value.commodityBrandName}]产品，请帮我放大优惠`;
  const query = buildShareQueryParams(SHARE_ACTION_ASSIST_COUPON, {
    ...couponDetail.value,
  });
  return {
    title,
    path: `pages/appointment/appointment?${query}`,
  };
});
</script>

<style lang="scss">
.content {
  background-color: #156557;
  overflow-y: scroll;
  flex: 1;
  .card {
    background-color: white;
    // height: 1050rpx;
    // min-height: 1050rpx;
    margin: 32rpx;
    border-radius: 32rpx;
    // .user {
    // 	box-sizing: border-box;
    // 	width: 150rpx;
    // 	height: 150rpx;
    // 	border: 4rpx solid white;
    // 	border-radius: 75rpx;
    // 	margin-top: -75rpx;
    // }
    // .name {
    // 	margin-top: 10rpx;
    // }
    .money {
      font-size: 48rpx;
      color: $primary-color;
      margin-top: 40rpx;
    }
    .barcode {
      margin-top: 33rpx;
      position: absolute;
      left: 10000rpx;
    }
    .barcode-img {
      margin-top: 33rpx;
      width: 650rpx;
      height: 112rpx;
    }
    .barcode-text {
      font-size: 22rpx;
      margin-top: 20rpx;
    }
    .qrcode {
      margin-top: 60rpx;
      width: 390rpx;
      height: 390rpx;
      position: absolute;
      left: 10000rpx;
    }
    .qrcode-img {
      margin: 56rpx;
      width: 390rpx;
      height: 390rpx;
    }
    .qrcode-desc {
      font-size: 22rpx;
      margin-top: 20rpx;
      .refresh {
        width: 40rpx;
        height: 45rpx;
        padding: 10rpx;
        box-sizing: border-box;
        margin-right: 10rpx;
      }
    }
    // .datas {
    // 	height: 187rpx;
    // 	min-height: 187rpx;
    // 	align-self: stretch;
    // 	// background-color: red;
    // 	border-top: 2rpx dashed $divider-color;
    // 	padding: 0 48rpx;
    // 	.number {
    // 		font-size: 48rpx;
    // 		color: #36BBA5;
    // 	}
    // 	.label {
    // 		margin-top: 15rpx;
    // 		color: $text-color2;
    // 		font-size: 28rpx;
    // 	}
    // }
    .divider {
      height: 1px;
      border-top: 1px dashed $divider-color !important;
      background-color: transparent;
      align-self: stretch;
      margin-top: 40rpx;
    }
    .infos {
      padding: 34rpx 48rpx;
      align-self: stretch;
      .invites {
        align-self: stretch;
        border: 2rpx solid $primary-color;
        margin-bottom: 38rpx;
        .invites-hint {
          color: $text-color5;
          font-size: 24rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
        }
        .invites-friend {
          font-size: 24rpx;
          height: 80rpx;
          line-height: 80rpx;
          padding: 0 48rpx;
        }
      }
      .infos-item {
        height: 44rpx;
        line-height: 44rpx;
        font-size: 24rpx;
        color: $text-color5;
      }
      .rule-item {
        font-size: 20rpx;
        color: $text-color5;
        line-height: 30rpx;
      }
    }
  }
  .invite-button {
    background-color: transparent;
    outline-color: transparent;
    outline: none;
    border: none;
  }
  .invite-button::after {
    border: none;
  }
  .invite-text {
    font-size: 32rpx;
    color: white;
  }
  .invite-icon {
    width: 42rpx;
    height: 32rpx;
    margin-right: 15rpx;
  }
}
</style>
